<style lang="less">
@import "../../../styles/common.less";
/*修改开始*/
/*修改为模块.less*/
@import "./faq.less";
/*修改结束*/
</style>

<template>
  <div>
    <Row :gutter="10">
      <Col span="24">
        <Card>
          
          {{/*模块标题*/}}
          <p slot="title">
            <Icon type="pinpoint"></Icon>
            {{/*修改开始*/}}FAQ管理{{/*修改结束*/}}
          </p>

          <Row class="margin-top-10">
            <Button type="primary" class="margin-bottom-10" @click="handleCreate">创建</Button>
             {{/*主体模块，不用修改*/}}
            <common-table @on-delete="handleDel" @on-update="handleUpdate" :columns-list="columnsList" v-model="tableData"></common-table>
            
            {{/*分页模块，不用修改*/}}
            <Row class="margin-top-20" type="flex" justify="start">
              <Page :total="page.total" show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
            </Row>

            {{/*
              对话框
              1.修改Modal里面title属性
              2.修改FormItem
            */}}
            {{/*修改开始*/}}
            <Modal
              v-model="modal"
              title="FAQ"
              :loading="modalLoading"
              @on-ok="asyncOK('formValidate')"
              @on-cancel="handleModalCanel()">
              <Form ref="formValidate" :model="formValidate" :rules="ruleInline">
                {{/*
                  每个FormItem对应每个属性
                  1.修改label 为属性中文
                  2.修改prop  为属性的英文
                  3.修改v-model fromValidate. 加上属性的英文
                  4.修改type  为属性的类型
                  5.修改placeholder 为属性的默认值
                */}}
                <FormItem label="问题" prop="question">
                  <Input v-model="formValidate.question" placeholder="输入你的问题"></Input>
                </FormItem>
                <FormItem label="答案" prop="answer">
                  <Input v-model="formValidate.answer" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="输入你的答案"></Input>
                </FormItem>
              </Form>
            </Modal>
            {{/*修改结束*/}}
          </Row>
        </Card>
      </Col>
    </Row>  
  </div>
</template>

<script>
/*
  引入table模块
  引入table_data的数据
*/
import commonTable from '../../components/commonTable.vue';
import tableData from '../../components/table_data.js';

export default {
  /**
   * 修改开始
   */
  name: "faq",
  /**
   * 修改结束
   */


  components: {
    commonTable
  },
  data() {
    return {
      // 列的数组
      columnsList: [],
      // 对话框状态
      modal: false,
      // 页面加载状态
      loading: true,
      // 对话框加载状态
      modalLoading: true,
      // 提交状态  create 或 edit
      submitType: 'create',
      // 分页数据
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      // 表单属性
      formValidate: {
      /**
       * 修改开始
       */
        question: "",
        answer: ""
      /**
       * 修改结束
       */
      },
      // 表单验证属性
      ruleInline: {
      /**
       * 修改开始
       */
        question: [
          {
            required: true,
            message: "请输入问题。",
            trigger: "blur"
          }
        ],
        answer: [
          {
            required: true,
            message: "请输入该问题的答案。",
            trigger: "blur"
          }
        ]
      /**
       * 修改结束
       */
      },
      // 表格行的数据
      tableData: []
    };
  },
  // 方法
  methods: {
    // 获取数据
    getData() {
      /**修改开始 */
      this.columnsList = tableData.faqColumns;
      this.$api.faq.getProductFaqList(this.page).then((data) => {
      /**修改结束 */
        this.tableData = data.data.data.list;
        this.page.total = data.data.data.total;
        this.loading = false;
      });
      
    },
    // 对话框点击确认的方法
    asyncOK(name) {
      // 调用对话框提交方法传递name参数
      this.handleSubmit(name); 
    },
    // 点击创建按钮方法
    handleCreate() {
      // 打开对话框
      this.modal = true;
      // 将提交状态改为create
      this.submitType = 'create';
    },

    // 点击修改按钮
    handleUpdate(val) {
      // 打开对话框
      this.modal = true;
      // 将提交状态改为edit
      this.submitType = 'edit';

      /**修改开始 */
      this.formValidate.question = val.question;
      this.formValidate.answer = val.answer;
      /**修改结束 */

      this.formValidate.id = val.id;
      this.formValidate.version = val.version;
    },

    // 对话框提交方法
    handleSubmit(name) {
      // 做了表单验证
      this.$refs[name].validate(valid => {
        // 如果通过进行数据提交
        if (valid) {
          let params = JSON.parse(JSON.stringify(this[name]));
          params.likeNumber = 0;
          if (this.submitType === 'create') {
            /**修改开始 */
            this.$api.faq.addProductFaq(params).then((data) => {
            /**修改结束 */
             this.renderData('create', data);
            })
          } else if (this.submitType === 'edit') {
            /**修改开始 */
            this.$api.faq.editProductFaq(params).then((data) => {
            /**修改结束 */
              this.renderData('edit', data);    
            })
          }
        }
      });
    },

    // 删除方法
    handleDel (val, index) {
      /**修改开始 */
      this.$api.faq.delProductFaq(val[index]).then((data) => {
      /**修改结束 */
        this.renderData('del', data, index);
      })
    },
    // 对话框取消方法
    handleModalCanel() {
      this.clearFormInfo();
    },
    // 将表单数据初始化
    clearFormInfo() {
      this.formValidate = {};
      this.btnType = 'create';
    },
    // 渲染数据（提交请求后服务端返回数据处理）
    renderData(type, data, index) {
      if (data.data.code === 200) {
        this.modal = false;
        switch(type) {
          case 'create': this.$Message.success('成功添加了一条数据'); break;
          case 'edit': this.$Message.success('成功修改了一条数据'); break;
          case 'del': this.$Message.success('删除了第' + (index + 1) + '行数据'); break;
          default : break;
        }
        this.clearFormInfo();
        this.getData();
      } else {
        this.$Message.error("添加失败!请检查网络");
      }     
    },
    // 当前页改变的方法
    pageChange(pageNumber) {
      this.page.pageNum = pageNumber;
      this.getData();
    },
    // 分页的页面数量改变的时候方法
    pageSizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getData();
    }
  },
  // 当组件加载后调用的方法
  created() {
    this.getData();
  }
};
</script>
